<!DOCTYPE html>
<html lang="en"> <!-- 该应用的每个网页都将引用这个页面，主要是顶部横栏和底部栏 -->
  <head>  
    <meta charset="utf-8">
    <title>电影推荐系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    {% block stylesheets %}    <!--  block 告诉模版引擎： 子模版可能会覆盖掉模版中的这些位置 -->
        <!-- Bootstrap provided CSS files. -->
        <link href="/static/css/bootstrap.css" rel="stylesheet">
        <style type="text/css">
          body {
            padding-top: 60px;
            padding-bottom: 40px;
          }
        </style>
        <link href="/static/css/bootstrap-responsive.css" rel="stylesheet">
    {% endblock stylesheets %}

    {% block javascript %}

        <!-- Bootstrap related javascript files -->
     
        <script src="/static/js/jquery.js"></script>
        <script src="/static/js/bootstrap-transition.js"></script>
        <script src="/static/js/bootstrap-alert.js"></script>
        <script src="/static/js/bootstrap-modal.js"></script>
        <script src="/static/js/bootstrap-dropdown.js"></script>
        <script src="/static/js/bootstrap-scrollspy.js"></script>
        <script src="/static/js/bootstrap-tab.js"></script>
        <script src="/static/js/bootstrap-tooltip.js"></script>
        <script src="/static/js/bootstrap-popover.js"></script>
        <script src="/static/js/bootstrap-button.js"></script>
        <script src="/static/js/bootstrap-collapse.js"></script>
        <script src="/static/js/bootstrap-carousel.js"></script>
        <script src="/static/js/bootstrap-typeahead.js"></script>
    {% endblock javascript %}
  </head>

  <body>

    {% block header %}
        <div class="navbar navbar-fixed-top">
          <div class="navbar-inner">
            <div class="container">

	              <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
	                <span class="icon-bar"></span>
	                <span class="icon-bar"></span>
	                <span class="icon-bar"></span>
	              </a>

                  <div class="nav-collapse">
    	                <ul class="nav">
    	                  <li class="active"><a href="/">首页</a></li>
    	                  <li class=""><a href="/movies-recs">电影推荐</a></li>
    	                </ul>
                  </div>

	              <div>   <!-- 点击search,激活方法POST，触发home函数 -->
		                <form class="navbar-search pull-left" action="{% url 'home' %}" method="POST">
		                  {% csrf_token %}  <!-- 用于防治跨站攻击验证 -->
		                   <div style="overflow: hidden; padding-right: .5em;">
                        <!-- 两个输入框，这是导航栏的搜索框 -->
		                     <input type="text" name="data" style="width: 70%;" />
		                     <input type="submit" name="search" value="搜索" size="30" style="float: right" />
		                    </div>
		                </form>
	             </div>

               {% if user.is_authenticated %} <!-- 用户已登录，触发home函数，方法GET -->
                <form class="navbar-search pull-right" action="{% url 'home' %}" method="GET">
                    <ul class="nav">
                       <div style="overflow: hidden; padding-right: .5em;">
                         <li style="background-color:#C92525;font-size:14px" class="">{{user.get_username}} </li>
                         <li class=""><a href="/signout">退出登录</a></li>
                        </div>
                    </ul>
                </form>

                {% else %} <!-- 用户未登录，单击sign in 或sign up 按钮，将激活auth函数，指向urls.py -->
                
                <form class="navbar-search pull-right" action="{% url 'auth' %}" method="GET">
                  {% csrf_token %}
                   <div style="overflow: hidden; padding-right: .5em;">
                     <input type="submit" name="auth_method" value="注册" size="30" style="float: right" />
                     <input type="submit" name="auth_method" value="登录" size="30" style="float: right" /><!-- sign up 按钮指向urls.py的语句，该url调用views.py的signout函数 -->
                    </div>
                </form>                
                {% endif %}
                
            </div>
          </div>
        </div>
    {% endblock header %}



    <div class="container">
        <div class="hero-unit">
            
            {% block content %} <!-- 其他页面会填充该部分：创建用户，主页，未找到，请注册，查询结果，推荐，注册，登出 -->
            {% endblock content %} <!-- 超级用户登录，低于最小打分电影数量，用户已存在或其他问题 -->



            {% block footer %}
                <section id="lines"><hr></section>
                <section id="footer">
                     AI智能推荐
                </section>
            {% endblock footer %}

        </div>
    </div> 



  </body>
</html>

